// https://github.com/hotwired/turbo/pull/386
button                  .show-when-disabled { display: none; }
button[disabled]        .show-when-disabled { display: initial; }

button                  .show-when-enabled { display: initial; }
button[disabled]        .show-when-enabled { display: none; }

.payment-action-save {
  @include button-variant(theme-color('success'), theme-color('success'), theme-color('success') );
}

.btn {
  transition: background-color 0.1s linear 0s, border-color 0.2s linear 0s !important;
}

.btn-primary, .btn-light, .btn-secondary {
  box-shadow: $btn-box-shadow;
}

.btn,
.nav-pills > li > a {
  vertical-align: middle;
  transition: color 0.1s linear 0s, background-color 0.1s linear 0s, opacity 0.2s linear 0s !important;
}

.btn:focus {
  outline: none !important;
  box-shadow: none !important;
}

.btn:disabled {
  cursor: not-allowed;
}

.ti {
  font-size: 120%;
  vertical-align: middle;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  vertical-align: middle;

  .ship {
    color: #fff;
  }
}

.btn-primary {
  @extend .shadow-xs;
}

.btn-lg {
  @extend .py-2;
  @extend .px-4;
}

.btn-danger {
  @extend .btn-light;
  color: $danger !important;

  &:hover {
    background: rgba($danger, 0.1) !important;
    border-color: rgba($danger, 0.1) !important;
    color: $danger !important;
  }
}

.hover-light {
  &:hover, &:focus {
    background-color: rgba($light, 0.75);
    text-decoration: none;
  }
}
.hover-gray {
  &:hover, &:focus {
    background-color: $gray-50;
    text-decoration: none;
  }
}
.hover-gray-200 {
  &:hover, &:focus {
    background-color: $gray-200;
    text-decoration: none;
  }
}
.hover-primary {
  &:hover, &:focus {
    background-color: theme-color('black');
    text-decoration: none;
  }
}

.btn-secondary {
  color: $primary;
  border-color: rgba($primary, 0.1);

  &:hover, &:focus {
    border-color: rgba($primary, 0.2) !important;
    color: $primary !important;
  }

  .arrow {
    color: $primary !important;
  }
}

.actions .btn {
  margin-left: 5px;
}

.btn-close {
  @extend .btn;
  background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/0.85em auto no-repeat;
  width: 0.85em;
  height: 0.85em;
  opacity: 0.5;
  padding: 12px;
  border-radius: $border-radius;

  &:hover {
    opacity: 0.8 !important;
    background-color: $gray-50 !important;
  }
}

.btn i {
  margin-right: 0.5rem;
}
.btn-sm i {
  margin-right: 0.25rem;
}

.btn-light {
  background-color: $gray-25;
  border-color: $border-color;
  color: $gray-700;

  &:hover, &:focus {
    border-color: $border-color;
    background-color: $gray-50;
    color: $gray-900;
  }

  &:focus, &:active {
    background: $gray-50 !important;
    box-shadow: $btn-active-box-shadow !important;
  }

  &.bg-transparent {
    background: transparent;
  }
}

.btn-dark {
  background-color: $gray-900;
  color: $gray-200;

  &:hover, &:focus {
    background: linear-gradient($gray-900, $primary) !important;
    border-color: $gray-700 !important;
    color: $white !important;
  }
}

.btn-clipboard {
  @extend .btn-light;
  @extend .btn-sm;
  @extend .px-1;
  @extend .ml-2;
  @extend .font-size-sm;

  min-width: 24px;
  height: 24px;
}
